<template>
    <!-- 中秋活动核销页面 -->
    <div class="page absolute t0 w100 h100" v-if="isLogin">
        <div class="flex col mt40 mb20">
            <span class="fs18 bold whiteText lh24">壹杯加咖啡<br>中秋月饼礼盒</span>
            <span class="offColor fs18 mt10">门店核销</span>
        </div>
        <div class="absolute w100 b30 main">
            <div class="whiteBg section br5 h100 relative">
                <img class="Img" src="../../../images/writeOff4.png" alt="">
                <div class="fs18 lh18 mt20 mb20">
                    <p class="bold">{{couponName}}</p>
                    <p>&nbsp;</p>
                </div>
                <div class="fs18 lh18 mt60">
                    <p class="bold">提货券有效期</p>
                    <p>{{validatyBegin | endTime2}} ~ {{validatyEnd | endTime2}}</p>
                </div>
                <div :class="['offColor','fs16','absolute','b0','w100','offBtn','bblr5','bbrr5',isHeXiao?'garyBg':'']" 
                    @click="hexiao">
                    {{isHeXiao?"已核销":"核销领取"}}
                </div>
            </div>
            <img class="bgImg1 absolute" src="../../../images/writeOff2.png" alt="">
            <img class="bgImg2 absolute" src="../../../images/writeOff3.png" alt="">
        </div>
    </div>
</template>
<script>
import { getUrlParameters,getOpenId } from "methods/baseinfo.js";
import { cancelCoupon,hexiaoCoupon } from 'request';
export default {
    name:'writeOff',
    data(){
        return {
            isHeXiao:false,
            shareCouponNo:'',
            isLogin:false,
            couponName:'',                  //优惠券名称
            validatyBegin:'',               //优惠券开始时间
            validatyEnd:'',                 //优惠券结束时间
        }
    },
    beforeRouteEnter(to,from,next){
        if(sessionStorage.getItem("isHkb")){
            next(vm=>{
                vm.isLogin = true;
                vm.$store.commit('increment','优惠券核销');
            });
        }else{ 
            //如果没有登陆就先进入登陆页，然后跳转回来
            next(vm=>{
                vm.$router.push({ path:'/login',query:{ pageUrl: 'writeOff' }});
            })
        }
    },
    created(){
        var jsonStr = getUrlParameters();
        this.shareCouponNo = jsonStr.state || 'ff0c6f8a41df40b79d78047038c1afba';
        hexiaoCoupon({verificationNo:this.shareCouponNo}).then(res=>{
            if(res.rspCode == '0000' && res.data.code == '0000'){
                this.isHeXiao = false;
                this.couponName = res.data.dto.couponName;
                this.validatyBegin = res.data.dto.validatyBegin;
                this.validatyEnd = res.data.dto.validatyEnd;
                if(res.data.dto.status == '00'){
                    this.isHeXiao = false;
                }else{
                    this.isHeXiao = true;
                    this.$Toast("此优惠券已核销")
                }
            }else{
                this.isHeXiao = true;
                this.$Toast("优惠券信息获取失败，无法核销~",3000);
            }
        }).catch(err=>{
            this.isHeXiao = true;
        })
    },
    methods:{
        async hexiao(){
            if(!this.isHeXiao){
                const openId = await getOpenId();
                cancelCoupon({verificationNo:this.shareCouponNo, openId:openId}).then(res=>{
                    if(res.rspCode == '0000' && res.data.rspCode == '0000'){
                        this.$Toast("核销成功!");
                        this.isHeXiao = true;
                    }else{
                        this.$Toast(res.rspMsg || res.data.rspMsg)
                    }
                }).catch(err=>this.$Toast("核销失败"))
            }
        }
    }
}
</script>
<style lang="less" scoped>
.offColor{
    color:#ffe262;
}
.page{
    background:url('../../../images/writeOff1.png') no-repeat;
    background-size:100% 100%;
    .Img{
        width:18rem;
        height:18rem;
        margin-top:-4rem;
    }
    .main{
        top:18rem;
    }
    .section{
        width:80%;
        margin-left:10%;
        color: #4f3572;
    }
    .bgImg1{
        width:45%;
        left:-1rem;
        bottom:18rem;
    }
    .bgImg2{
        width:45%;
        right:-1rem;
        top:13rem;
    }
    .offBtn{
        background:#7c3d83;
        height:5rem;
        line-height:5rem;
    }
    .garyBg{
        background:#898989 !important;
        color:white !important;
    }
}
</style>
